<template>
	<div class="tabs">
		<ul class="tabs__title">
			<li v-for="(item,index) in tabs" :class="{active: active === index}" @click="changeSelect(index)">
				<router-link :to="{path: item.to}" replace>{{item.label}}</router-link>
			</li>
		</ul>
		<div class="tabs__content">	
			<keep-alive>				
				<router-view></router-view>
			</keep-alive>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					label: "日迹",
					to: "/user_info/track",
					flag: 0,
				},{
					label: "宝贝",
					to: "/user_info/goods",
					flag: 1,
				},{
					label: "评论",
					to: "/user_info/ratings",
					flag: 2,
				}],
				active: 0,
			};
		},
		created() {
			this.ifFresh();
		},
		methods: {
			changeSelect(val) {
				this.active = val;
			},
			ifFresh() {
				const path = this.$route.path.match(/\/(\w+)$/)[1];
				switch(path) {
					case "track": this.active = 0;break;
					case "goods": this.active = 1;break;
					case "ratings": this.active = 2;break;
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tabs__title {
		padding: $com-padding-lr-base 0;
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #ccc;
		a {
			font-size: $font-sm;
			color: $gray-light;
		}
		.active {
			a {
				color: $blue-light;
				font-weight: bold;
			}
		}
	}

</style>